<template>
    <!--
        使用说明：
        1）、引入 category-cascader.vue
        2）、语法：<category-cascader :catelogPath.sync="catelogPath"></category-cascader>
            解释：
              catelogPath：指定的值是 cascader 初始化需要显示的值，应该和父组件的 catelogPath 绑定;由于有 sync 修饰符，所以 cascader 路径
                           被选中发生变化以后自动会修改父的 catelogPath，这是结合子组件 this.$emit("update:catelogPath",v); 做的
    -->
    <!--
        在 el-cascader 上绑定一个 v-model="paths"，从而实现当前这个 category-cascader 父组件和 el-cascader 的通信，当级联选择器中的项被选中
        之后，就会发送一个默认的 input 事件给这个父组件，更新 paths 的值。当 paths 的值被更新之后，就会触发侦听器，发送 update:catelogPath
        事件给父组件，然后更新 catelogPath 值。并且发送消息给 brand-select 组件
    -->
    <div>
        <el-cascader filterable clearable placeholder="试试搜索：手机" v-model="paths" :options="categorys" :props="setting"></el-cascader>
    </div>
</template>

<script>
    import PubSub from 'pubsub-js'
    // 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
    // 例如：import 《组件名称》 from '《组件路径》';

    export default {
        // import引入的组件需要注入到对象中才能使用
        components: {
        },
        // 接受父组件传来的值
        props: {
            catelogPath: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            // 这里存放数据
            return {
                setting: {
                    value: "catId",
                    label: "name",
                    children: "children"
                },
                categorys: [],
                paths: this.catelogPath
            };
        },
        watch: {
            catelogPath(v){
                this.paths = v;
            },
            paths(v) {
                this.$emit("update:catelogPath", v);
                // 还可以使用 pubsub-js 进行传值
                console.log("使用 pubsub 发布消息");
                PubSub.publish("catPath", v);
            }
        },
        // 方法集合
        methods: {
            // 在当前 vue 组件的生命周期创建完成之后，会发送一个 GET 请求，获取 category 种类列表
            getCategorys() {
                this.$http({
                    url: this.$http.adornUrl("/product/category/list/tree"),
                    method: "get"
                }).then(({data}) => {
                    this.categorys = data.data;
                });
            }
        },
        // 生命周期 - 创建完成（可以访问当前 this 实例）
        created() {
            this.getCategorys();
        }
    };
</script>
<style>
</style>
